<template> 
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float: right" @click="handleSearchList()" type="primary" size="small">
                    查询结果
                </el-button>
                <el-button style="float: right;margin-right: 15px" @click="handleResetSearch()" size="small">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="输入搜索：">
                        <el-input style="width: 203px" v-model="listQuery.param.contactName"
                                  placeholder="联系人"></el-input>
                    </el-form-item>
                    <el-form-item label="输入搜索：">
                        <el-input style="width: 203px" v-model="listQuery.param.contactPhone"
                                  placeholder="联系电话"></el-input>
                    </el-form-item>
                    <el-form-item label="输入搜索：">
                        <el-input style="width: 203px" v-model="listQuery.param.reserveNumber"
                                  placeholder="预定编号"></el-input>
                    </el-form-item>
                    <el-form-item label="输入搜索：">
                        <el-input style="width: 203px" v-model="listQuery.param.roomNumber"
                                  placeholder="房间号"></el-input>
                    </el-form-item>
                    <el-form-item label="预约状态：">
                        <el-select v-model="listQuery.param.status" placeholder="全部" clearable>
                            <el-option v-for="item in publishStatusOptions" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
        </el-card>
        <div class="table-container">
            <el-table ref="productTable" :data="list" style="width: 100%" @selection-change="handleSelectionChange"
                      v-loading="listLoading" border>
                <el-table-column type="selection" width="60" align="center"></el-table-column>
                <el-table-column label="编号" width="50" align="center">
                    <template slot-scope="scope">{{scope.row.id}}</template>
                </el-table-column>
                <el-table-column label="预定编号" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.reserveNumber}}</template>
                </el-table-column>
                <el-table-column label="背景图" width="120" align="center">
                    <template slot-scope="scope"><img style="height: 80px" :src="scope.row.backgroundImage"></template>
                </el-table-column>
                <!--                <el-table-column label="图片" width="120" align="center">-->
                <!--                    <template slot-scope="scope"><img style="height: 80px" :src="scope.row.images"></template>-->
                <!--                </el-table-column>-->
                <el-table-column prop="apply" label="预约状态" align="center">
                    <template slot-scope="scope">
                        {{scope.row.type == 1 ? '房间' : ''}}
                        {{scope.row.type == 2 ? '大厅' : ''}}
                        {{scope.row.type == 3 ? '走廊' : ''}}
                    </template>
                </el-table-column>
                <el-table-column label="房号" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.roomNumber}}</template>
                </el-table-column>
                <el-table-column label="预定开始时间" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.startTime}}</template>
                </el-table-column>
                <el-table-column label="预定结束时间" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.endTime}}</template>
                </el-table-column>
                <el-table-column label="名称" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.name}}</template>
                </el-table-column>
                <!--                <el-table-column label="面积" width="100" align="center">-->
                <!--                    <template slot-scope="scope">{{scope.row.area}}</template>-->
                <!--                </el-table-column>-->
                <el-table-column label="最大人数" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.maxPeople}}</template>
                </el-table-column>
                <el-table-column label="人数" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.peopleNumber}}</template>
                </el-table-column>
                <el-table-column prop="apply" label="预约状态" align="center">
                    <template slot-scope="scope">
                        {{scope.row.status == 1 ? '已预约' : ''}}
                        {{scope.row.status == 2 ? '已使用' : ''}}
                        {{scope.row.status == 3 ? '已作废' : ''}}
                        {{scope.row.status == 4 ? '已离开' : ''}}
                    </template>
                </el-table-column>
                <el-table-column label="联系人" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.contactName}}</template>
                </el-table-column>
                <el-table-column label="联系电话" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.contactPhone}}</template>
                </el-table-column>
                <el-table-column label="邮箱" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.contactEmail}}</template>
                </el-table-column>
                <el-table-column label="紧急联系人电话" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.contactSupplyPhone}}</template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <p>
                            <el-button size="mini" v-if="scope.row.status == 1" type="success"
                                       @click="updateUse(scope.$index, scope.row)">已使用
                            </el-button>
                        </p>
                        <p>
                            <el-button size="mini" v-if=" scope.row.status == 1" type="info"
                                       @click="updateToVoid(scope.$index, scope.row)">已作废
                            </el-button>
                        </p>
                        <p>
                            <el-button size="mini" v-if="scope.row.status == 2" type="warning"
                                       @click="updateLeave(scope.$index, scope.row)">已离开
                            </el-button>
                        </p>
                        <p>
                            <el-button size="mini" v-if="scope.row.status == 4 || scope.row.status == 3" type="danger"
                                       @click="updateIsDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           layout="total, sizes,prev, pager, next,jumper" :page-size="listQuery.pageSize"
                           :page-sizes="[5,10,15]"
                           :current-page.sync="listQuery.pageNum" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    const defaultListQuery = {
        pageNum: 1,
        pageSize: 10,
        param: {
            status: null,
            contactName: null,
            contactPhone: null,
            reserveNumber: null,
            roomNumber: null
        }
    };
    export default {
        name: 'productList',
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                editSkuInfo: {
                    dialogVisible: false,
                    stockList: [],
                    productAttr: []
                },
                publishType: [
                    {
                        value: 1,
                        label: '房间'
                    }, {
                        value: 2,
                        label: '大厅'
                    }, {
                        value: 3,
                        label: '走廊'
                    }
                ],
                status: [
                    {
                        id: 1,
                        name: '上架'
                    }, {
                        id: 0,
                        name: '下架'
                    }, {
                        id: 2,
                        name: '删除'
                    }
                ],
                operateType: null,
                listQuery: Object.assign({}, defaultListQuery),
                list: null,
                total: null,
                listLoading: true,
                selectProductCateValue: null,
                multipleSelection: [],
                productCateOptions: [],
                brandOptions: [],
                priceLists: [],
                publishStatusOptions: [{
                    value: 1,
                    label: '已预约'
                }, {
                    value: 2,
                    label: '已使用'
                }, {
                    value: 3,
                    label: '已作废'
                }, {
                    value: 4,
                    label: '已离开'
                }],
                verifyStatusOptions: [{
                    value: 1,
                    label: '审核通过'
                }, {
                    value: 0,
                    label: '未审核'
                }]
            };
        },
        created() {
            this.getList();
            this.getProductCateList();
        },
        watch: {
            selectProductCateValue: function(newValue) {
                if (newValue != null && newValue.length == 2) {
                    this.listQuery.param.categoryId = newValue[1];
                } else {
                    this.listQuery.param.categoryId = null;
                }

            }
        },
        filters: {
            verifyStatusFilter(value) {
                if (value === 1) {
                    return '审核通过';
                } else {
                    return '未审核';
                }
            }
        },
        methods: {
            updateUse(index, row) {
                reserveUpdate({ id: row.id, status: 2 }).then(res => {
                    this.$confirm('是否修改为使用', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        if (res.returnCode == 200) {
                            this.getList();
                        }
                    });
                });
            },
            updateToVoid(index, row) {
                this.$confirm('是否修改为已作废', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    reserveUpdate({ id: row.id, status: 3 }).then(res => {
                        if (res.returnCode == 200) {
                            this.getList();
                        }
                    });
                });
            },
            updateLeave(index, row) {
                this.$confirm('是否修改为已离开', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    reserveUpdate({ id: row.id, status: 4 }).then(res => {
                        if (res.returnCode == 200) {
                            this.getList();
                        }
                    });
                });
            },
            updateIsDelete(index, row) {
                this.$confirm('是否删除', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    reserveUpdate({ id: row.id, status: 5 }).then(res => {
                        if (res.returnCode == 200) {
                            this.getList();
                        }
                    });
                });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleShowVerifyDetail(index, row) {
                console.log('handleShowVerifyDetail', row);
            },
            addPrice(row) {
                layer.open({
                    type: 2,
                    area: ['40%', '65%'],
                    title: '添加规格',
                    fixed: true, //不固定
                    maxmin: true,
                    content: ['/#/goodsPriceAdd?goodsId=' + row.id, 'yes']
                });
            },
            getProductSkuSp(row, index) {
                let spData = JSON.parse(row.spData);
                if (spData != null && goodsList < spData.length) {
                    return spData[goodsList].value;
                } else {
                    return null;
                }
            },
            getList() {
                this.listLoading = true;
                reserveList(this.listQuery).then(res => {
                    this.listLoading = false;
                    this.list = res.data.list;
                    this.total = res.data.total;
                });
            },
            //没问题
            getProductCateList() {
                listWithChildren().then(res => {
                    let list = res.data;
                    this.productCateOptions = [];
                    for (let i = 0; i < list.length; i++) {
                        let children = [];
                        if (list[i].children != null && list[i].children.length > 0) {
                            for (let j = 0; j < list[i].children.length; j++) {
                                children.push({ label: list[i].children[j].name, value: list[i].children[j].id });
                            }
                        }
                        this.productCateOptions.push({ label: list[i].name, value: list[i].id, children: children });
                    }
                });
            },
            handleShowSkuEditDialog(index, row) {
                listPrice({
                    pageNum: 1, pageSize: 50, param: { goodsId: row.id }
                }).then(res => {
                    if (res.returnCode == 200) {
                        this.editSkuInfo.stockList = res.data.list;
                        console.log(this.editSkuInfo.stockList);
                        this.editSkuInfo.dialogVisible = true;
                    } else if (res.returnCode == 10007) {
                        this.$message.error(`请添加价格`);
                    }
                });
            },

            handleEditSkuConfirm() {
                if (this.editSkuInfo.stockList == null || this.editSkuInfo.stockList.length <= 0) {
                    this.$message({
                        message: '暂无sku信息',
                        type: 'warning',
                        duration: 1000
                    });
                    return;
                }
                this.$confirm('是否要进行修改', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    updatePriceList(this.editSkuInfo.stockList).then(res => {
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.editSkuInfo.dialogVisible = false;
                    });
                });
            },

            handleSearchList() {
                // this.listQuery.pageNum = 1;
                this.$set(this.listQuery, 'pageNum', 1);
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.pageNum = 1;
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            // 重置
            handleResetSearch() {
                this.selectProductCateValue = [];
                this.listQuery.param = Object.assign({}, defaultListQuery);
            },
            handleAddProduct() {
                layer.open({
                    type: 2,
                    area: ['60%', '85%'],
                    title: '增加商品',
                    fixed: true, //不固定
                    maxmin: true,
                    content: ['/#/goodsAdd', 'yes']
                });
            },
            handleUpdateProduct(row) {
                layer.open({
                    type: 2,
                    area: ['60%', '85%'],
                    title: '商品详情',
                    fixed: true, //不固定
                    maxmin: true,
                    content: ['/#/goodsUpdate?id=' + row.id + '&teahouseId=' + row.distributorId, 'yes']
                });
            },

            handlePublishStatusChange(index, row) {
                this.updatePublishStatus(row.status, row.id);
            },
            handleNewStatusChange(index, row) {
                this.updateNewStatus(row.newStatus, row.id);
            },
            handleRecommendStatusChange(index, row) {
                this.updateRecommendStatus(row.recommandStatus, row.id);
            },
            updatePublishStatus(status, id) {
                updateGoods({ status, id }).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 1000
                    });
                });
            },
            updateNewStatus(newStatus, id) {
                updateGoods({ newStatus, id }).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 1000
                    });
                });
            },
            updateRecommendStatus(recommendStatus, id) {
                updateGoods({ recommendStatus, id }).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 1000
                    });
                });
            },
            handleDelete(index, row) {
                this.$confirm('是否要进行删除操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = [];
                    ids.push(row.id);
                    let isDelete = 1;
                    this.updateDeleteStatus(isDelete, row.id);
                });
            },
            updateDeleteStatus(isDelete, id) {
                updateGoods({ isDelete, id }).then(res => {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        duration: 1000
                    });
                });
                this.getList();
            }
        }
    };
</script>
<style>
    .specsdinput {
        width: 90% !important;
        height: auto;
        margin: 5px 5%;
    }

    .specsdinput input {
        margin: 0;
        text-align: center;
    }
</style>